<!--
 * @Author: your name
 * @Date: 2021-07-26 14:04:33
 * @LastEditTime: 2021-08-11 15:57:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \getHome (2)\src\view\evaluate\appraise.vue
-->
<template>
  <div class="content">
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>评价管理</el-breadcrumb-item>
        <el-breadcrumb-item>评价项配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top: 0px;">
      <div class="hander">评价项配置</div>

      <div>
        <el-table :data="dataList">
          <el-table-column label="评价项" prop="questionName">
          </el-table-column>
          <el-table-column label="用户可选项">
            <template slot-scope="scope">
              <div
                v-for="(item, index) in scope.row.evaluateConfigResponse"
                :key="index"
              >
                <p style="height:30px;line-height:30px;">{{ item.answer }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="对应icon">
            <template slot-scope="scope">
              <div
                v-for="(item, index) in scope.row.evaluateConfigResponse"
                :key="index"
                style="display:flex;justify-content:center;"
              >
                <img
                  width="30px"
                  height="30px"
                  :src="item1.url"
                  alt=""
                  v-for="(item1, index1) in item.answerIconList"
                  :key="index1"
                  style="margin-left:5px;"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="评价项类型" prop="questionType">
            <template slot-scope="scope">
              <div>
                {{ scope.row.questionType == 1 ? "满意度评价" : "小问答" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="medium"
                @click="handleUpdate(scope.$index, scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <div class="left"></div>
        <div class="right">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-size="pageSize"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog title="修改评价项" :visible.sync="dialogFormVisible">
        <el-form :model="newObj" ref="newObj">
          <!-- <el-form :model="newObj" :rules="rules" ref="newObj"> -->

          <el-form-item label="评价项" label-width="120px" prop="questionName">
            <el-input
              style="color: #fc9e76;"
              type="text"
              placeholder="请输入内容"
              v-model="newObj.questionName"
              maxlength="30"
              show-word-limit
            >
            </el-input>
          </el-form-item>

          <el-form-item label="用户可选项" label-width="120px">
            <div
              class="pic"
              v-for="(item, index) in newObj.evaluateConfigResponse"
              :key="index"
            >
              <el-input v-model="item.answer"></el-input>
              <div class="big">
                <el-upload
                  action="https://api.xstarlife.com/systemapp/upload/singleFileUpload"
                  list-type="picture-card"
                  :headers="{ uploadScene: 'avatar' }"
                  :on-success="handleAvatarSuccess.bind(this, index)"
                  :before-upload="beforeAvatarUpload"
                  :on-remove="handleRemove.bind(this, index)"
                  :file-list="item.answerIconList"
                  :limit="2"
                  v-if="queston"
                >
                  <i class="el-icon-plus" v-if="IconLen == 0">
                    <p style="font-size:0.5px">未选中</p>
                  </i>
                  <i class="el-icon-plus" v-if="IconLen == 1">
                    <p style="font-size:0.5px">选中</p>
                  </i>
                  <i class="el-icon-plus" v-else>
                    <p style="font-size:0.5px">未选中</p>
                  </i>
                </el-upload>
              </div>
              <div class="dialog-footer">
                <el-button
                  v-if="index === 0"
                  style="background-color:#fd804c;color: #fff;"
                  @click="addUpdateLocation()"
                  size="mini"
                  >新 增</el-button
                >
                <el-button
                  v-else
                  type="danger"
                  style="margin-top: 10px"
                  size="mini"
                  @click="delUpdateLoaction(index)"
                  >删 除</el-button
                >
              </div>
            </div>
          </el-form-item>
        </el-form>

        <div slot="footer" class="bottom">
          <el-button @click="dialogFormVisible = false" size="medium"
            >取 消</el-button
          >
          <el-button
            style="background-color:#fd804c;color: #fff;"
            @click="ok('newObj')"
            size="medium"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      queston: true,
      dialogVisible: false,
      currentPage1: 1, //当前页码
      pageSize: 20, //每页显示的个数
      IconLen: null,

      newObj: {
        evaluateConfigResponse: [
          {
            answer: "",
            answerIconList: []
          }
        ],
        questionCode: "",
        questionName: ""
      },
      questionType: "",
      dialogFormVisible: false,
      dataList: [],
      rules: {
        questionName: [
          { required: true, message: "请输入活动名称", trigger: "blur" }
        ]
      }
    };
  },

  created() {
    this.getList();
  },
  methods: {
    //图片上传
    handleAvatarSuccess(index, { data }) {
      //判断图标选中未选中
      this.IconLen =
        this.newObj.evaluateConfigResponse[index].answerIconList.length + 1;
      // 添加图片url
      this.newObj.evaluateConfigResponse[
        index
      ].answerIconList = this.newObj.evaluateConfigResponse[
        index
      ].answerIconList.concat([
        {
          url: data
        }
      ]);
    },
    // 总数据.slice((当前页码—1)*每页显示的个数)，（当前页码*每页的个数）,
    handleSizeChange(val) {
      //改变每页显示的个数
      this.currentPage1 = 1;
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      //改变当前页码
      this.currentPage1 = val;
      this.getList();
    },
    // 编辑按钮
    handleUpdate(_, row) {
      this.queston = row.questionType == 2 ? false : true;
      this.questionType = row.questionType;
      setTimeout(() => {
        this.dialogFormVisible = true;
      }, 500);
      this.newObj = { ...row };
    },

    // 评价表配置项 新增
    addUpdateLocation() {
      this.newObj.evaluateConfigResponse.push({
        answer: "",
        answerIconList: []
      });
    },
    // 评价表配置项 删除
    delUpdateLoaction(index) {
      this.newObj.evaluateConfigResponse.splice(index, 1);
    },
    // 图片删除
    handleRemove(index, file, fileList) {
      //判断图标选中未选中
      this.IconLen =
        this.newObj.evaluateConfigResponse[index].answerIconList.length - 1;

      const findIndex = this.newObj.evaluateConfigResponse[
        index
      ].answerIconList.findIndex(item => {
        return item.url === file.url;
      });
      if (findIndex !== undefined) {
        this.newObj.evaluateConfigResponse[index].answerIconList.splice(
          findIndex,
          1
        );
      }
    },
    ok(formName) {
      //console.log("       this.queston.,,,,", this.queston);
      this.$refs[formName].validate(valid => {
        if (valid) {
          let answerList = [];
          this.newObj.evaluateConfigResponse.forEach(item => {
            let answerIconList = [];
            item.answerIconList.forEach(item1 => {
              answerIconList.push(item1.url);
            });
            answerList.push({
              answer: item.answer,
              answerIconList
            });
          });

          if (this.queston) {
            const array = answerList.find(function(item, index) {
              return item.answerIconList.length !== 2;
            });

            // const array1 = answerList.some(
            //   item => item.answerIconList.length < 2
            // );

            if (!!array == false) {
              if (this.newObj.questionName == "") {
                this.$message.error("请填写评价项！");
              } else {
                //判断是否是满意度问答，如果是就做图片只能是两张的校验
                this.$http({
                  url: "/hsssystemadmin/config/evaluate/fetchEvaluateAdd",
                  method: "POST",
                  data: {
                    questionName: this.newObj.questionName,
                    questionCode: this.newObj.questionCode,
                    questionType: this.newObj.questionType,
                    answerList
                  }
                })
                  .then(res => {
                    if (res.success == 0) {
                      this.$message.error(res.errorMsg);
                      this.getList();
                    } else {
                      this.$message.success("编辑成功");
                      this.getList();
                    }
                  })
                  .catch(res => {
                    this.$message.error(res.errorMsg);
                  });
              }
            } else {
              this.$message.error("上传图片必须为两张！");
              this.getList();
            }
          } else {
            this.$http({
              url: "/hsssystemadmin/config/evaluate/fetchEvaluateAdd",
              method: "POST",
              data: {
                questionName: this.newObj.questionName,
                questionCode: this.newObj.questionCode,
                questionType: this.newObj.questionType,
                answerList
              }
            })
              .then(res => {
                if (res.success == 0) {
                  this.$message.error(res.errorMsg);
                  this.getList();
                } else {
                  this.$message.success("编辑成功");
                  this.getList();
                }
              })
              .catch(res => {
                this.$message.error(res.errorMsg);
                this.getList();
              });
          }

          // 关弹框;
          this.dialogFormVisible = false;
        } else {
          this.$message.error("表单信息不完整！");
          return false;
        }
      });
    },

    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片只支持JPG/JPEG/png格式");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    getList() {
      this.$http({
        url: "/hsssystemadmin/config/evaluate/fetchEvaluateList",
        method: "GET",

        params: {
          page: this.currentPage1,
          size: this.pageSize
        }
      }).then(result => {
        this.dataList = result.data.list;
        this.total = parseInt(result.data.total);
        // 更改datalist的数据结构
        this.dataList.forEach(item => {
          item.evaluateConfigResponse.forEach(item1 => {
            const array = [];
            item1.answerIconList.forEach(item2 => {
              array.push({ url: item2 });
            });
            item1.answerIconList = array;
          });
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.block {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 60px 0 10px;
}
.left {
  font-size: 15px;
}

.pic {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bottom {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 30%;
}

/deep/ .el-upload--picture-card {
  width: 40px;
  height: 40px;
}
/deep/ .el-upload--picture-card i {
  font-size: 20px;
}
/deep/ .el-upload {
  width: 40px;
  height: 40px;
  line-height: 40px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 40px;
  height: 40px;
  line-height: 40px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 40px;
  height: 40px;
  line-height: 40px;
}
/deep/ .avatar {
  width: 40px;
  height: 40px;
}

.big {
  margin-left: 2%;
  width: 180px;
  height: 80%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
</style>
